<template>
  <el-container class="main_con nobg nopd">
    <div class="card_div">
      <img src="@/assets/images/fan_bg.png" />
      <div class="card_content">
        <div class="card_title">
          <span>商户名称：{{ detail.name }}</span>
          <span>商户地址：{{ detail.district }}{{ detail.address }}</span>
        </div>
        <div class="flex_div">
          <div class="flex_center">
            <span>商户总金额</span>
            <span>{{ detail.cash ? detail.cash.total : '0.00' }}</span>
          </div>
          <div class="flex_center">
            <span>可提现金额</span>
            <span>{{ detail.cash ? detail.cash.recharge : '0.00' }}</span>
          </div>
          <div class="flex_center">
            <span>已提现金额</span>
            <span>{{ detail.cash ? detail.cash.withdraw : '0.00' }}</span>
          </div>
        </div>
        <div class="btns"><el-button v-if="config.merchant_withdraw == 1" v-has type="primary" @click="drawer = true">提现</el-button></div>
      </div>
    </div>
    <!-- <el-card shadow="always" class="card_div">
    <el-row :gutter="12">-->
    <!--        <el-form>
          <el-col :span="8">
            <el-form-item label="商户名称">
              <span>{{ detail.name }}</span>
            </el-form-item>
            <el-form-item label="商户LOGO">
              <img style="width: 80px;height: 80px;" :src="detail.logo"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户地址">
              <span>{{ detail.district }}{{ detail.address }}</span>
            </el-form-item>
          </el-col>e'l
          <el-col :span="8">
            <el-form-item label="商户总金额">
              <span>{{ detail.cash ? detail.cash.total : '0.00' }}</span>
            </el-form-item>
            <el-form-item label="可提现金额">
              <span>{{ detail.cash ? detail.cash.recharge : '0.00' }}</span>
            </el-form-item>
            <el-form-item label="已提现金额">
              <span>{{ detail.cash ? detail.cash.withdraw : '0.00' }}</span>
            </el-form-item>
            <el-form-item><el-button type="primary" @click='drawer=true'>提现</el-button></el-form-item>
          </el-col>
    </el-form>-->
    <!--   </el-row>
    </el-card>-->
    <div class="filter_con ds_block nopt nomt">
      <div class="filter_area">
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.merchant_name" placeholder="商户名称"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList">搜索</el-button>
      </div>
      <div class="list_con nomt nopd" style="margin-top:20px">
        <el-table @selection-change="selectItem" :data="list" element-loading-text fit highlight-current-row>
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="withdraw" label="申请金额"></el-table-column>
          <el-table-column prop="service_charge" label="手续费"></el-table-column>
          <el-table-column prop="withdraw" label="实际到账">
            <template slot-scope="scope">
              <span>{{ scope.row | gettotal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ scope.row.is_online == 1 ? '线上' : '线下' }}
            </template>
          </el-table-column>
          <el-table-column label="提现账号">
            <template slot-scope="scope">
              <span v-if="scope.row.is_online == 1">{{ scope.row.type == 1 ? '微信零钱' : '用户余额' }}</span>
              <template v-else>
                <span>{{ scope.row.card ? scope.row.card.name : '' }}:</span>
                <span>{{ scope.row.card ? scope.row.card.card : '' }}</span>
              </template>
            </template>
          </el-table-column>
          <!--
          <el-table-column prop="withdraw" label="提现金额"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">{{ scope.row.is_online == 1 ? '线上' : '线下' }}</template>
          </el-table-column>
          <el-table-column label="提现账号">
            <template slot-scope="scope">
              <span v-if="scope.row.is_online == 1">微信零钱</span>
              <template v-else>
                <span>{{ scope.row.card ? scope.row.card.name : '' }}:</span>
                <span>{{ scope.row.card ? scope.row.card.card : '' }}</span>
              </template>
            </template>
          </el-table-column> -->
          <el-table-column prop="serial_num" label="流水号"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column prop="status_text" label="状态"></el-table-column>
          <el-table-column label="操作" v-if="false">
            <template slot-scope="scope">
              <el-button type="text" @click="operateItem(scope.row, 1)">打款通过</el-button>
              <el-button type="text" @click="operateItem(scope.row, 2)">拒绝</el-button>
              <el-button type="text" @click="delItem(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer" v-show="total != 0">
          <el-button @click="delMul" size="medium">批量删除</el-button>
          <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog destroy-on-close :visible.sync="drawer" width="600px">
      <el-form ref="withdrawdiv" :model="width_obj" :rules="withdrawRules" label-width="80px">
        <el-form-item label="商户余额">
          <span>{{ detail.cash ? detail.cash.recharge : '0.00' }}</span>
        </el-form-item>
        <el-form-item label="提现金额" prop="amount"><el-input style="width:300px;" v-model="width_obj.amount"></el-input></el-form-item>
        <el-form-item label="提现方式">
          <el-radio-group v-model="is_online">
            <el-radio :label="1">线上打款</el-radio>
            <el-radio :label="0">线下打款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提现到" v-if="is_online == 1&&config.merchant_withdraw_type">
          <el-radio-group v-model="onlinetype">
            <el-radio v-if="config.merchant_withdraw_type.indexOf('1') > -1" :label="1">微信钱包</el-radio>
            <el-radio v-if="config.merchant_withdraw_type.indexOf('2') > -1" :label="2">余额</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手续费" v-if="config && (config.merchant_withdraw_limit || config.merchant_withdraw_service || config.merchant_is_free_fee)">
          <span v-if="config.merchant_withdraw_limit">金额满{{ config.merchant_withdraw_limit_cash }}可提现,</span>
          <span v-if="config.merchant_withdraw_service">手续费{{ config.merchant_service_charge }}%</span>
          <span v-if="config.merchant_is_free_fee">免手续费区间:{{ config.merchant_free_fee_section[0] + '-' + config.merchant_free_fee_section[1] }}</span>
        </el-form-item>
        <template v-if="is_online == 0&&config.merchant_withdraw_type_outline">
          <el-form-item label="账号类型">
            <el-radio-group v-model="card.name">
              <el-radio v-if="config.merchant_withdraw_type_outline.indexOf('1') > -1" label="微信账号">微信账号</el-radio>
              <el-radio v-if="config.merchant_withdraw_type_outline.indexOf('2') > -1" label="支付宝账号">支付宝账号</el-radio>
              <el-radio v-if="config.merchant_withdraw_type_outline.indexOf('3') > -1" label="银行卡账号">银行卡账号</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账号" prop="card"><el-input style="width:300px;" v-model="width_obj.card"></el-input></el-form-item>
        </template>

        <el-form-item>
          <el-button @click="merchantwithdrawtotal" v-if="onlinetype == 2 && is_online == 1">确认</el-button>
          <el-button v-else @click="merchantwithdraw">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {getWithdrawList, getmerchantdetail, merchantwithdraw, merchantwithdrawtotal} from '@/api/shop/finance';
export default {
  data() {
    return {
      options: [
        {
          value: -2,
          label: '全部'
        },
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 1,
          label: '通过'
        },
        {
          value: 2,
          label: '拒绝'
        }
      ],
      obj: {
        //merchant_id:'',
        merchant_name: '',
        status: -2,
        begin_date: '',
        end_date: ''
      },
      width_obj: {
        card: '',
        amount: ''
      },
      objTemp: {},
      isLoading: false,
      list: [],
      total: 0,
      page: 1,
      size: 10,
      listSelected: [],
      detail: {
        cash: {}
      },
      card: {
        card: '',
        name: '微信账号'
      },
      drawer: false,
      is_online: 1,
      withdrawRules: {
        amount: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入提现金额'
          }
        ],
        card: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入账号'
          }
        ]
      },
      config: {},
      onlinetype: 1,
      onlinelist: [
        {
          type: '1',
          value: '微信余额',
          checked: false
        },
        {
          type: '2',
          value: '账户余额',
          checked: false
        }
      ],
      outonlinelist: [
        {
          type: '1',
          value: '微信',
          checked: false
        },
        {
          type: '2',
          value: '支付宝',
          checked: false
        },
        {
          type: '3',
          value: '银行卡',
          checked: false
        }
      ]
    };
  },
  filters:{
    gettotal(data){
      let a=0;
      a=data.withdraw-data.service_charge;
      return a.toFixed(2)
    },
  },
  components: {
    DatePicker
  },
  mounted() {
    this.getmerchantdetail();
  },

  methods: {
    getmerchantdetail() {
      let data = {};
      getmerchantdetail(data).then(res => {
        this.detail = res.msg;
        this.config = res.msg.config;
        if (this.config.merchant_withdraw) {
          this.searchList();
        } else {
        }
      });
    },
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    merchantwithdraw() {
      this.$refs.withdrawdiv.validate(valid => {
        if (valid) {
          let data = {
            amount: this.width_obj.amount,
            is_online: this.is_online
          };
          if (!this.is_online) {
            let card = {
              card: this.width_obj.card,
              name: this.card.name
            };
            data.card = JSON.stringify(card);
          }
          merchantwithdraw(data).then(res => {
            this.drawer=false
            this.getmerchantdetail()
            
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    merchantwithdrawtotal() {
      this.$refs.withdrawdiv.validate(valid => {
        if (valid) {
          let data = {
            amount: this.width_obj.amount,
            is_online: this.is_online
          };

          merchantwithdrawtotal(data).then(res => {
            this.drawer=false
            this.getmerchantdetail()
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    delMul() {},
    //搜索数据
    searchList() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.status == -2) {
        delete this.objTemp.status;
      }

      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      let data = {
        // page:this.page,
        // size:this.size
      };
      getWithdrawList(data, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        let list = o.data;
        list.forEach(a => {
          a.card = JSON.parse(a.card);
        });
        this.list = list;
        this.total = o.total;
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    }
  }
};
</script>

<style lang="scss" scoped>
.main_con {
  // width: 82.1vw;
  // margin:  0 auto;
  padding: 20px 50px;
}
.list_con {
  border-top: 1px solid #f2f2f2;
}

.card_div {
  background: #ffffff;
  box-shadow: 1px 5px 29px 0px rgba(51, 51, 51, 0.08);
  border-radius: 20px;
  position: relative;
  margin-bottom: 20px;
  img {
    width: 100%;
  }
  .card_content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .card_title {
      padding: 20px 40px;
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      line-height: 20px;
      span {
        margin-right: 38px;
      }
    }
    .flex_div {
      display: flex;
      height: 58%;
      align-items: center;
      .flex_center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        font-size: 24px;

        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
        span {
          margin-bottom: 16px;
        }
      }
    }
    .btns {
      // height: 24%;
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: center;
      .el-button {
        width: 140px;
        height: 48px;
        background: #2e68ea;
        box-shadow: 1px 5px 29px 0px rgba(83, 149, 252, 0.5);
        border-radius: 10px;
      }
    }
  }
}
</style>
